import React, { Component } from 'react'
import {Table, Button, Input, Form, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import {FormWrapper} from '../base/BaseStatic'
import styled from 'styled-components'
import {formatDate2} from '../../common/js/index'

class operatingRecord extends Component {
  constructor (props) {
    super(props)
    // 退回方式，操作内容返回字段未确定
    this.state = {
      // 表格数据
      columns: [
        { label: '操作人', prop: 'handlerName' },
        { label: '操作时间', prop: 'createTime' },
        { label: '操作内容', prop: 'handleBehavior' },
        { label: '审核备注', prop: 'remark' }
      ],
      // 表单数据
      form: {
        userId: null,
        orderId: null,
        applicationDescribe: null,
        applicationReason: null,
        acceptAmount: null,
        applicationRemark: null,
        imagesUrl: null,
        returnType: null,
        returnInfo: null,
        handles: [
          { handlerName: '123', createTime: '123', handleBehavior: '12', remark: '245' },
          { handlerName: '123', createTime: '123', handleBehavior: '12', remark: '245' }
        ]
      }
    }
  }
  componentDidMount () {
    this.$ajax.selectOperateRecord(this.props.match.params.id).then(res => {
      if (res.code === 200) {
        res.data.handles.map(a => {
          a.createTime = formatDate2(a.createTime)
          a.updateTime = formatDate2(a.updateTime)
          return a
        })
        this.setState({form: res.data})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  render () {
    const ImageWrapper = styled.div`
      display: flex;
      flex-wrap: wrap;
      width: 438px;
      img {
        display: block;
        width: 140px;
        height: 140px;
        margin: 2px;
        border: 1px solid #D3DCE6;
        border-radius: 4px;
      }
    `
    return (
      <div>
        <Breadcrumb data={['售后', '操作记录']}/>
        {/* 表单 */}
        <FormWrapper model={this.state.form} labelWidth="80">
          <Form.Item label="* 会员ID"><Input value={this.state.form.userId} disabled></Input></Form.Item>
          <Form.Item label="* 订单号"><Input value={this.state.form.orderId} disabled></Input></Form.Item>
          <Form.Item label="* 申请类型"><Input value={this.state.form.applicationDescribe} disabled></Input></Form.Item>
          <Form.Item label="* 退款原因"><Input value={this.state.form.applicationReason} disabled></Input></Form.Item>
          <Form.Item label="* 退款金额"><Input value={this.state.form.acceptAmount} disabled></Input></Form.Item>
          <Form.Item label="用户备注"><Input value={this.state.form.applicationRemark} disabled></Input></Form.Item>
          <Form.Item label="图片凭证"><img src={this.state.form.imagesUrl} />
            {/*<ImageWrapper>
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
            </ImageWrapper>*/}
          </Form.Item>
          <Form.Item label="退回方式"><Input value={this.state.form.returnType} disabled></Input></Form.Item>
          <Form.Item label="物流单号"><Input value={this.state.form.returnInfo} disabled></Input></Form.Item>
          <Form.Item>
            <Table
              columns={this.state.columns}
              data={this.state.form.handles}
              border={true}
              highlightCurrentRow={true}
            />
          </Form.Item>
          <Form.Item><Button type="warning" size="large" onClick={() => {global.history.go(-1)}}>返回</Button></Form.Item>
        </FormWrapper>
      </div>
    )
  }
}
export default withRouter(operatingRecord)